<%@ Page Language="C#" MasterPageFile="~/Site.master" Title="DataList Basic" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server">
    <AjaxData:DataList ID="DataList1" runat="server" DataKeyField="ID" CssClass="DataWebControlStyle" AllowDragAndDrop="true" DataBoundEvent="onDataBound">
       <AlternatingItemStyle CssClass="AlternatingRowStyle" />
       <ItemStyle CssClass="RowStyle" />
       <HeaderStyle CssClass="HeaderStyle" />
       <FooterStyle CssClass="FooterStyle" />
       <HeaderTemplate><h3>Product Information</h3></HeaderTemplate>
        <ItemTemplate>
            <h4>
                {{ eval(Name) }}
            </h4>
            <table border="0">
                <tr>
                    <td class="ProductPropertyLabel">Category:</td>
                    <td>{{ eval(CategoryName) }}</td>
                    <td class="ProductPropertyLabel">Supplier:</td>
                    <td>{{ eval(SupplierName) }}</td>
                </tr>
                <tr>
                    <td class="ProductPropertyLabel">Qty/Unit:</td>
                    <td>{{ eval(QuantityPerUnit) }}</td>
                    <td class="ProductPropertyLabel">Price:</td>
                    <td>{{ eval(UnitPrice) }}</td>
                </tr>
            </table>

        </ItemTemplate>
        <SeparatorTemplate>
            <hr />
        </SeparatorTemplate>
    </AjaxData:DataList>
    <script type="text/javascript">

        function pageLoad(sender, e)
        {
            DataService.GetProductList(0, 10, '', '', onLoadSuccess);
        }

        function onLoadSuccess(result)
        {
            var dataList = DataList1;

            dataList.set_dataSource(result.Rows);
            dataList.dataBind();
        }
        
    </script>
</asp:Content>